<template>
  <div>
    <Card dis-hover :bordered="false" class="ivu-mt">
      <Row :gutter="16" type="flex" class="ivu-mb-16">
        <Col>
          <DatePicker
            :editable="false"
            type="daterange"
            v-model="timedate"
            :options="options"
            placeholder="请选择日期"
            @on-change="askDatatime"
          >
          </DatePicker>
        </Col>
        <Col>
          <Input
            placeholder="请输入姓名/手机号/微信号/唯一身份"
            v-model="params.keyword"
            clearable
            v-width="250"
            @on-clear="askDatasearch"
            @on-enter="askDatasearch"
          />
        </Col>
        <Col>
          <Select
            placeholder="线索状态"
            v-model="params.clue_status_id"
            filterable
            clearable
            v-width="150"
            @on-change="askDatachange"
          >
            <Option
              v-for="item in clueList"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </Col>
        <Col>
          <Select
            placeholder="部门筛选"
            v-model="params.unique_id"
            filterable
            clearable
            v-width="150"
            @on-change="askDatachange"
          >
            <Option
              v-for="item in departmentList"
              :key="item.value"
              :value="item.unique_id"
              >{{ item.label }}
            </Option>
          </Select>
        </Col>
        <Col>
          <Select
            placeholder="联系人员"
            v-model="params.contact_id"
            filterable
            clearable
            v-width="150"
            @on-change="askDatachange"
          >
            <Option
              v-for="item in contact_member"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}
            </Option>
          </Select>
        </Col>
        <Col>
          <Select
            placeholder="对话方式"
            v-model="params.dialog_mode_id"
            clearable
            v-width="150"
            @on-change="askDatachange"
          >
            <Option
              v-for="item in dialogList"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}
            </Option>
          </Select>
        </Col>
        <!-- <Col>
            <TreeSelect
                v-model="params.source_channel_id"
                :data="channelList"
                v-width="150"
                :clearable="true"
                placeholder="来源渠道"
                @on-change="askDatachange"
            />
          </Select>
        </Col> -->
        <Col style="display: flex;align-items: center;justify-content: center;">
          <CheckboxGroup @on-change="checkbox3">
            <Checkbox label="重复"></Checkbox>
          </CheckboxGroup>
          <CheckboxGroup @on-change="checkbox4">
            <Checkbox label="手机号"></Checkbox>
          </CheckboxGroup>
        </Col>
      </Row>
      <div class="ivu-clearfix"></div>
      <Table
        highlight-row
        ref="table"
        :columns="columns"
        :max-height="600"
        :data="list"
        :loading="loading"
        size="small"
      >
        <template slot-scope="{ row }" slot="info">
          <a @click="openInfo(row)">{{ row.info }}</a>
        </template>
        <template slot-scope="{ row }" slot="mobile">
          <span v-if="row.mobile !== ''">{{ row.mobile }}</span>
          <Divider type="vertical" v-if="row.mobile && row.wechat_num" />
          <span v-if="row.wechat_num !== ''">{{ row.wechat_num }}</span>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <a
            v-hasC="{
              name: 'clue-user-info4',
              flag: 'v1/clue/user/info',
            }"
            @click="openedit(row)"
            v-if="+row.type !== 4"
            >联系</a
          >
          <span class="person" v-else>{{ row.contact_name }}</span>
          <!-- <Divider type="vertical" v-if="row.repeat_type === '1' && row.contact_name " v-hasC="{
                            name: 'v1-patient-index-repeat-list6',
                            flag: 'v1/patient/index/repeat-list',
                        }" /> -->
          <Divider
            type="vertical"
            v-if="row.repeat_type === '1'"
            v-hasC="{
              name: 'v1-patient-index-repeat-list6',
              flag: 'v1/patient/index/repeat-list',
            }"
          />
          <a
            v-if="row.repeat_type === '1'"
            v-hasC="{
              name: 'v1-patient-index-repeat-list6',
              flag: 'v1/patient/index/repeat-list',
            }"
            @click="repeatData(row)"
            >重复</a
          >
        </template>
        <template slot-scope="{ row }" slot="dialog_mode">
          <span>
            {{
              row.dialog_mode === "E聊"
                ? row.dialog_mode +
                  (row.user_real_name ? "(" : "") +
                  row.user_real_name +
                  (row.user_real_name ? ")" : "")
                : row.dialog_mode
            }}
          </span>
        </template>
        <template slot-scope="{ row }" slot="state">
          <div v-if="row.clue_status_name">
            <Tag v-if="row.type === 1" color="warning">{{
              row.clue_status_name
            }}</Tag>
            <Tag v-else-if="row.type === 2" color="primary">{{
              row.clue_status_name
            }}</Tag>
            <Tag v-else-if="row.type === 3" color="default">{{
              row.clue_status_name
            }}</Tag>
            <Tag v-else-if="row.type === 4" color="success">{{
              row.clue_status_name
            }}</Tag>
            <Tag v-else>{{ row.clue_status_name }}</Tag>
          </div>
        </template>
      </Table>
      <div class="ivu-mt ivu-text-center">
        <Page
          show-total
          show-elevator
          show-sizer
          :total="total"
          :current.sync="params.page"
          :page-size="params.pageSize"
          :page-size-opts="pageOpts"
          @on-change="changepage"
          @on-page-size-change="changepageSize"
        />
      </div>
    </Card>
    <Modal
      ref="contact"
      title="联系线索客户"
      v-model="showedit"
      :mask-closable="false"
      width="1100"
      @on-cancel="canceledit('formItem')"
    >
      <Row>
        <Col span="11">
          <DescriptionList :col="2" :gutter="0">
            <!-- { id: undefined, user_name: '', mobile: '', wechat_num: '', age: undefined, gender: '', channel_id: '', customer_remark: '', body_parts_ids: [],upload_talk_img: [] }, -->
            <Description term="基本信息：">
              {{ info.user_name }}
              {{ info.gender_str }}
              <span v-if="info.age"> {{ info.age }}岁 </span>
              <!-- <Poptip width="10" :content="info.user_name">
                        </Poptip> -->
              <!-- <div style="width: 90%;"></div> -->
            </Description>
            <Description term="联系方式：">
              <template>{{ info.mobile }}</template>
              <Divider
                type="vertical"
                v-if="info && info.mobile && info.wechat_num"
              />
              <template>{{ info.wechat_num }}</template>
            </Description>
            <Description term="搜索词：">
              <div style="word-break:break-all">
                {{ info.search_key }}
              </div>
            </Description>
            <Description term="对话方式：">
              {{ info.dialog_mode }}
            </Description>
          </DescriptionList>
          <DescriptionList :col="1" :gutter="0">
            <Description term="来源备注：">{{
              info.source_remark
            }}</Description>
          </DescriptionList>
          <!-- <Description term="留言内容：">{{ info.message }}</Description> -->
          <DescriptionList
            :col="1"
            v-if="info && info.dialog_mode !== 'E聊'"
            :gutter="0"
          >
            <Description term="留言内容：">
              <template>
                <div style="padding-right:10px;padding-left:10px;">
                  {{ info.message }}
                </div>
              </template>
            </Description>
          </DescriptionList>
          <DescriptionList :col="1" v-else :gutter="0">
            <Description term="聊天记录：">
              <div v-if="chartList.length">
                <div style="max-height: 380px; overflow: auto;">
                  <template v-for="(item, index) in chartList">
                    <div :key="index" style="margin-top:10px">
                      <div
                        style="margin-bottom: 6px;font-size:13px;color:#a7a3a3"
                      >
                        <span>{{
                          item.sender_type === "0"
                            ? "客服 - " +
                              (item.user_real_name
                                ? item.user_real_name
                                : item.from_id)
                            : "患者"
                        }}</span>
                        <span style="margin-left:30px">{{
                          item.receive_time
                        }}</span>
                      </div>
                      <img
                        @click="seeBIg(item.message)"
                        style="width: 100px;object-fit: cover;"
                        v-if="item.message.startsWith('https://')"
                        :src="item.message"
                        alt=""
                      />
                      <div
                        v-else
                        style="font-weight:600;width:300px;word-break:break-all "
                      >
                        {{ item.message }}
                      </div>
                    </div>
                  </template>
                </div>
                <div style="display: flex;justify-content:center">
                  <Page
                    :current="eChartPage"
                    :total="eChartTotal"
                    size="small"
                    @on-change="changeChartPages"
                  />
                </div>
              </div>
            </Description>
          </DescriptionList>
          <!-- <Timeline style="max-height: 380px; overflow: auto;">
                    <TimelineItem v-for="item in contact" :key="item.id">
                        <p class="time ivu-mb-8">
                            {{ item.created_at }}
                        </p>
                        <p class="content ivu-mb-8">
                            {{ item.remark }}
                        </p>
                        <p class="consultant ivu-mb-8">
                            <span class="c-inr ivu-mr-8">{{
                                item.realname
                                }}</span>
                            <Badge v-if="item.status_name === '未联系上'" status="success" :text="item.status_name" />
                            <Badge v-if="item.status_name === '无效'" status="processing" :text="item.status_name" />
                            <Badge v-if="item.status_name === '转客户'" status="warning" :text="item.status_name" />
                            <Badge v-if="item.status_name === '新数据'" status="default" :text="item.status_name" />
                        </p>
                    </TimelineItem>
                </Timeline> -->
          <Row :gutter="16" style="max-height: 340px; overflow: auto;">
            <Col
              span="8"
              v-for="(item, index) in info.upload_talk_img"
              :key="index"
              ><img
                style="height: 330px; width: 186px; object-fit: cover;"
                @click="
                  (imgNames = `${info.images_host}${item}`), (visibles = true)
                "
                :src="`${info.images_host}${item}`"
            /></Col>
          </Row>
        </Col>
        <Col span="13">
          <div
            style="padding-left: 20px;box-sizing: border-box;border-left: 1px solid #9b9ca0;"
          >
            <Form
              label-position="top"
              :model="contactData"
              ref="formItem"
              :rules="createRuless"
            >
              <!-- <Row> -->
              <!-- <Col span="8"> -->
              <FormItem label="联系结果">
                <RadioGroup
                  v-model="contactData.clue_status_id"
                  @on-change="changeclue"
                >
                  <Radio
                    :label="item.value"
                    v-for="item in clueList"
                    :key="item.value"
                    v-if="+item.value !== 9"
                  >
                    <span>{{ item.label }}</span>
                  </Radio>
                </RadioGroup>
              </FormItem>

              <!-- </Col> -->
              <!-- <Col span="16"> -->
              <template v-if="contactData.clue_status_id === '8'">
                <Row :gutter="24">
                  <Col span="5">
                    <FormItem label="姓名">
                      <Input
                        v-model="contactData.userName"
                        placeholder="请输入姓名"
                      />
                    </FormItem>
                  </Col>
                  <Col span="7">
                    <FormItem label="性别">
                      <RadioGroup v-model="contactData.sex">
                        <Radio :label="0">未知</Radio>
                        <Radio :label="1">男</Radio>
                        <Radio :label="2">女</Radio>
                      </RadioGroup>
                    </FormItem>
                  </Col>
                  <Col span="4">
                    <FormItem label="年龄" prop="age">
                      <InputNumber
                        :max="100"
                        :min="1"
                        v-model="contactData.age"
                      ></InputNumber>
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem label="城市" required>
                      <!-- <Select ref="citySearch" v-model="contactData.city" placeholder="请输入城市拼音简写"
                                        filterable remote clearable :remote-method="remoteMethod"
                                        :loading="loadingcity">
                                        <Option v-for="item in optionscity" :value="item.value" :key="item.value">{{
                                            item.label }}</Option>
                                    </Select> -->
                      <jgcheckcity
                        ref="checkcity"
                        @cityvalue="cityvalue"
                        :value="params.city_id"
                        :name="`graps`"
                      />
                    </FormItem>
                  </Col>
                </Row>
                <Row :gutter="24">
                  <Col span="8">
                    <FormItem label="手机号" prop="mobile">
                      <Input
                        v-model="contactData.mobile"
                        @on-blur="telrepeat(contactData.mobile)"
                        placeholder="请输入手机号"
                      />
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem label="微信号">
                      <Input
                        v-model="contactData.weChartNum"
                        @on-blur="WXrepeat(contactData.weChartNum)"
                        placeholder="请输入微信号"
                      />
                    </FormItem>
                  </Col>
                </Row>
                <Row :gutter="24">
                  <Col span="8">
                    <FormItem label="一级病种" prop="oneDiseases">
                      <Select
                        placeholder="请选择一级病种"
                        v-model="contactData.oneDiseases"
                        clearable
                        @on-clear="clearOne"
                        :key="Math.random() * 10 + 1"
                        @on-change="changeOne"
                      >
                        <Option
                          v-for="item in diseasesArr1"
                          :value="item.value"
                          :key="item.value"
                          >{{ item.label }}</Option
                        >
                      </Select>
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem
                      label="二级病种"
                      prop="twoDiseases"
                      :rules="twoRules"
                      v-show="diseasesArr2.length > 0"
                    >
                      <Select
                        :key="Math.random() * 10 + 1"
                        placeholder="请选择二级病种"
                        v-model="contactData.twoDiseases"
                        clearable
                      >
                        <Option
                          v-for="item in diseasesArr2"
                          :value="item.value"
                          :key="item.value"
                          >{{ item.label }}</Option
                        >
                      </Select>
                    </FormItem>
                  </Col>
                  <Col span="8">
                    <FormItem label="患者状态" prop="patientStatus">
                      <Select
                        placeholder="请选择"
                        v-model="contactData.patientStatus"
                        clearable
                      >
                        <Option
                          v-for="item in patientStatusArr"
                          :value="item.value"
                          :disabled="+item.is_select === 0"
                          :key="item.value"
                          >{{ item.label }}</Option
                        >
                      </Select>
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="12">
                    <FormItem
                      label="部位"
                      prop="bodyPart"
                      :rules="bodyPartRule"
                    >
                      <TreeSelect
                        :max-tag-count="2"
                        v-model="contactData.bodyPart"
                        :data="postList"
                        clearable
                        multiple
                      />
                    </FormItem>
                  </Col>
                </Row>
                <template
                  v-if="
                    contactData.patientStatus === '2' ||
                      contactData.patientStatus === '1'
                  "
                >
                  <FormItem label="下次回访时间" prop="day">
                    <Row :gutter="16" type="flex">
                      <Col>
                        <InputNumber
                          :formatter="$inputday"
                          :step="1"
                          :min="0"
                          v-model.number="contactData.day"
                          @on-change="blurday(contactData.day)"
                        >
                        </InputNumber>
                      </Col>
                      <Col>天后</Col>
                      <Col>
                        <DatePicker
                          :editable="false"
                          :options="optionss"
                          type="date"
                          v-model="DatePicker"
                          @on-change="changeday(DatePicker)"
                          placeholder="请输入回访时间"
                        >
                        </DatePicker>
                      </Col>
                    </Row>
                  </FormItem>
                </template>
                <template v-if="contactData.patientStatus === '1'">
                  <FormItem label="预到时间" prop="day1">
                    <Row :gutter="16" type="flex">
                      <Col>
                        <InputNumber
                          :formatter="$inputday"
                          :step="1"
                          :min="0"
                          v-model.number="contactData.day1"
                          @on-change="blurday1(contactData.day1)"
                        >
                        </InputNumber>
                      </Col>
                      <Col>天后</Col>
                      <Col>
                        <DatePicker
                          :editable="false"
                          :options="optionss"
                          type="date"
                          v-model="DatePicker1"
                          @on-change="changeday1(DatePicker1)"
                          placeholder="请输入预约时间"
                        >
                        </DatePicker>
                      </Col>
                    </Row>
                  </FormItem>
                </template>
              </template>
              <FormItem label="备注" prop="remark" :rules="remarkRule">
                <Input
                  type="textarea"
                  placeholder="请备注原因"
                  v-model="contactData.remark"
                  :autosize="{ minRows: 2, maxRows: 8 }"
                />
              </FormItem>
              <!-- </Col> -->
              <!-- </Row> -->
            </Form>
          </div>
        </Col>
      </Row>
      <div slot="footer">
        <Button @click="canceledit('formItem')">取消</Button>
        <Button
          :loading="subloading"
          type="primary"
          @click="handlesearch('formItem')"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal
      ref="contact"
      :footer-hide="true"
      title="线索详细"
      v-model="showInfoModal"
      :mask-closable="true"
      width="1100"
      @on-cancel="closeEl"
    >
      <DescriptionList :col="2">
        <Description term="基本信息：">
          <template v-if="infoData.info">
            {{ infoData.info.user_name }}
            {{ infoData.info.gender_str }}
            <span v-if="infoData.info.age"> {{ infoData.info.age }}岁 </span>
          </template>
        </Description>
        <Description term="联系方式：">
          <template v-if="infoData.info">{{ infoData.info.mobile }}</template>
          <Divider
            type="vertical"
            v-if="
              infoData.info && infoData.info.mobile && infoData.info.wechat_num
            "
          />
          <template v-if="infoData.info">{{
            infoData.info.wechat_num
          }}</template>
        </Description>
        <Description term="搜索词：">
          <template v-if="infoData.info">{{
            infoData.info.search_key
          }}</template>
        </Description>
        <Description term="对话方式：">
          <template v-if="infoData.info"
            >{{ infoData.info.dialog_mode }}1</template
          >
        </Description>
      </DescriptionList>
      <DescriptionList :col="1">
        <Description term="来源备注：">
          <template v-if="infoData.info">{{
            infoData.info.source_remark
          }}</template>
        </Description>
      </DescriptionList>
      <Row>
        <Col span="12">
          <DescriptionList
            :col="1"
            v-if="infoData.info && infoData.info.dialog_mode !== 'E聊'"
          >
            <Description term="留言内容：">
              <template>
                <span>{{ infoData.info.message }}</span>
              </template>
            </Description>
          </DescriptionList>
          <DescriptionList :col="1" v-else>
            <Description term="聊天记录：">
              <div v-if="chartList.length">
                <div style="height: 500px; overflow: auto;">
                  <template v-for="(item, index) in chartList">
                    <div :key="index" style="margin-top:10px">
                      <div
                        style="margin-bottom: 6px;font-size:13px;color:#a7a3a3"
                      >
                        <span>{{
                          item.sender_type === "0"
                            ? "客服 - " +
                              (item.user_real_name
                                ? item.user_real_name
                                : item.from_id)
                            : "患者"
                        }}</span>
                        <span style="margin-left:30px">{{
                          item.receive_time
                        }}</span>
                      </div>
                      <img
                        @click="seeBIg(item.message)"
                        style="width: 100px;object-fit: cover;"
                        v-if="item.message.startsWith('https://')"
                        :src="item.message"
                        alt=""
                      />
                      <div
                        v-else
                        style="font-weight:600;width:300px;word-break:break-all "
                      >
                        {{ item.message }}
                      </div>
                    </div>
                  </template>
                </div>
                <div style="display: flex;justify-content:center">
                  <Page
                    :current="eChartPage"
                    :total="eChartTotal"
                    size="small"
                    @on-change="changeChartPages"
                  />
                </div>
                <Divider></Divider>
              </div>
            </Description>
          </DescriptionList>
        </Col>
        <Col span="12">
          <template v-if="infoData.info">
            <Row :gutter="16" style="max-height: 340px; overflow: auto;">
              <Col
                span="8"
                v-for="(item, index) in infoData.info.upload_talk_img"
                :key="index"
                ><img
                  style="
                                        height: 330px;
                                        width: 186px;
                                        object-fit: cover;
                                    "
                  @click="
                    (imgNames = `${infoData.info.images_host}${item}`),
                      (visibles = true)
                  "
                  :src="`${infoData.info.images_host}${item}`"
              /></Col>
            </Row>
          </template>
          <template>
            <div
              style="height: 500px; overflow: auto;padding-left: 25px;box-sizing: border-box;border-left: 1px solid rgb(167, 163, 163);"
            >
              <Timeline>
                <TimelineItem v-for="item in infoData.contact" :key="item.id">
                  <p style="font-weight: 600;" class="time">
                    {{ item.created_at }}
                  </p>
                  <p class="content">{{ item.remark }}</p>
                  <p class="consultant">
                    <span class="c-inr ivu-mr-8">{{ item.realname }}</span>
                    <Badge
                      v-if="item.status_name === '未联系上'"
                      status="success"
                      :text="item.status_name"
                    />
                    <Badge
                      v-if="item.status_name === '无效'"
                      status="processing"
                      :text="item.status_name"
                    />
                    <Badge
                      v-if="item.status_name === '转客户'"
                      status="warning"
                      :text="item.status_name"
                    />
                    <Badge
                      v-if="item.status_name === '新数据'"
                      status="default"
                      :text="item.status_name"
                    />
                  </p>
                </TimelineItem>
              </Timeline>
            </div>
          </template>
        </Col>
      </Row>
    </Modal>
    <Modal
      title="重复数据"
      :mask-closable="false"
      footer-hide
      :width="80"
      v-model="repeatDatas"
    >
      <Table :max-height="400" :columns="repeatColumns" :data="repeatDataList">
        <template slot="user_name" slot-scope="{ row }">
          <span>{{ row.user_name }}</span>
          <span>{{
            row.gender === "0" ? "未知" : row.gender === "1" ? "女" : "男"
          }}</span>
          <span>{{ row.age }}</span>
        </template>
        <template slot="mobile" slot-scope="{ row }">
          <span
            v-if="
              +repeatInfo.repeat_type === 1 || +repeatInfo.repeat_type === 3
            "
            :class="
              row.mobile && row.mobile === repeatInfo.mobile
                ? 'repeatColor'
                : null
            "
          >
            {{ row.mobile }}
          </span>
          <span v-else>{{ row.mobile }}</span>
        </template>
        <template slot="dialog_mode" slot-scope="{ row }">
          <span>
            {{ row.dialog_mode }}
          </span>
        </template>
        <template slot="wechat_num" slot-scope="{ row }">
          <span
            v-if="
              +repeatInfo.repeat_type === 2 || +repeatInfo.repeat_type === 3
            "
            :class="
              row.wechat_num && row.wechat_num === repeatInfo.wechat_num
                ? 'repeatColor'
                : null
            "
          >
            {{ row.wechat_num }}
          </span>
          <span v-else>{{ row.wechat_num }}</span>
        </template>
      </Table>
    </Modal>
    <Modal v-model="imgModel" footer-hide>
      <p slot="header">
        查看大图
      </p>
      <img :src="src" style="width: 100%;object-fit: cover;" />
    </Modal>
  </div>
</template>
<script>
import {
  clueusergrablist,
  clueuserinfo,
  clueusercontact,
  patientindexsearchcity,
  grapRepeatData,
  EweCharts,
  patientindexsearchmobile,
} from "@api/hqapi";
import dayjs from "dayjs";
import mixins from "@/mixins/mixins";
// import jgcheckcity from "@/components/checkcity";
let lodash = require("lodash");
export default {
  components: {  },
  name: "grap",
  mixins: [mixins],
  data() {
    const validateMobile = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        let reg = /^\d{10,12}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的联系号码"));
        }
      }
    };

    return {
      loadings: false,
      repeatColumns: Object.freeze([
        {
          title: "基本信息",
          slot: "user_name",
        },
        {
          title: "手机号",
          slot: "mobile",
        },
        {
          title: "微信",
          slot: "wechat_num",
        },
        {
          title: "录入人员",
          key: "realname",
        },
        {
          title: "录入时间",
          key: "created_at",
        },
      ]),
      operationMember: [],

      edit: false,
      list: [],
      eChartPage: 1,
      eChartTotal: 0,
      chartList: [],
      repeatInfo: {},
      repeatDatas: false,
      repeatDataList: [],
      contactData: {
        id: undefined,
        clue_status_id: "8",
        remark: "",
        mobile: "",
        bodyPart: [],
        weChartNum: "",
        day: 1,
        day1: 0,
        type: 1,
        userName: "",
        age: 0,
        birthday: "",
        sex: "",
        city: "",
        oneDiseases: "",
        twoDiseases: "",
        patientStatus: "2",
      },
      preBirthday: "",
      diseasesArr2: [],
      diseasesArr1: [],
      contact: [],
      contactDatas: true,
      channelList: [],
      clueList: [],
      optionscity: [],
      departmentList: [],
      loadingcity: false,
      createRuless: {
        mobile: [{ validator: validateMobile, trigger: "blur" }],

        remark: [
          {
            required: true,
            type: "string",
            message: "请输入备注原因",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请填写年龄",
            type: "number",
            trigger: "blur,change",
          },
        ],
        city_id: [
          {
            required: true,
            message: "请选择城市",
            trigger: "change",
          },
        ],
        oneDiseases: [
          {
            required: true,
            message: "请选择一级病种",
            trigger: "change",
          },
        ],

        twoDiseases: [
          {
            required: true,
            message: "请选择二级病种",
            trigger: "change",
          },
        ],
        patientStatus: [
          {
            required: true,
            message: "请选择患者状态",
            trigger: "change",
          },
        ],
        day: [
          {
            required: true,
            type: "number",
            message: "请输入回访时间",
            trigger: "blur",
          },
        ],
        day1: [
          {
            required: true,
            type: "number",
            message: "请输入预约",
            trigger: "blur",
          },
        ],
      },
      contact_member: [],
      columns: [
        // { title: "基本信息", key: "info", fixed: "left", width: 130 },
        { title: "基本信息", slot: "info", fixed: "left", width: 150 },

        { title: "地区", key: "region", width: 130 },
        { title: "获取时间", key: "created_at", width: 160 },
        {
          title: "联系方式",
          slot: "mobile",
          width: 200,
        },

        // { title: '微信', key: 'weixin', width: 100 },
        // { title: '白斑部位', key: 'post', width: 100 },
        {
          title: "搜索词",
          key: "search_key",
          width: 150,
          ellipsis: true,
          tooltip: true,
        },
        // { title: "来源渠道", key: "source_channel", width: 100 },
        { title: "线索状态", slot: "state", width: 130 },
        {
          title: "唯一身份",
          key: "visitor_uid",
          width: 250,
          ellipsis: true,
          tooltip: true,
        },
        // { title: '疾病类型', key: 'illness_type', width: 100 },
        { title: "对话方式", slot: "dialog_mode", width: 140 },
        {
          title: "来源页面",
          key: "source_page",
          width: 130,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: "留言内容",
          key: "message",
          width: 300,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: "咨询备注",
          key: "advisory_remark",
          minWidth: 120,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: "联系人员",
          key: "contact_name",
          minWidth: 120,
          ellipsis: true,
          tooltip: true,
        },
        // { title: '录入人员', key: 'person', width: 100 },
        // { title: '标签', key: 'label', slot: 'label', minWidth: 125 },
        {
          title: "来源备注",
          key: "source_remark",
          width: 130,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: "操作",
          slot: "operation",
          fixed: "right",
          width: 130,
        },
      ],
      patientStatusArr: [],
      timedate: [new Date(), new Date()],
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      postList: [],
      imgModel: false,
      src: "",
      optionss: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 24 * 3600 * 1000;
        },
      },
      info: {},
      infoData: {},
      DatePicker: new Date(new Date().getTime() + 86400000),
      DatePicker1: new Date(new Date().getTime()),
      relus: {},
      showInfoModal: false,
      dialogList: [],
      // 请求参数
      params: {
        page: 1,
        pageSize: 10,
        keyword: "",
        contact_way: 0,
        have_repeat: 0,
        clue_status_id: "",
        dialog_mode_id: "",
        contact_id: "",
        source_channel_id: "",
        start_date: new Date(),
        end_date: new Date(),
        unique_id: "",
      },
    };
  },
  computed: {
    bodyPartRule() {
      if (this.contactData.oneDiseases === "1") {
        return {
          required: true,
          validator: (rule, value, callback) => {
            if (value.length) {
              callback();
            } else {
              callback(new Error("请选择部位"));
            }
          },
          trigger: "change",
        };
      } else {
        return {
          required: false,
          type: "array",
          trigger: "change",
        };
      }
    },
    remarkRule() {
      if (this.contactData.clue_status_id === "8") {
        return {
          required: false,
          type: "string",
          message: "请输入备注原因",
          trigger: "blur",
        };
      } else {
        return {
          required: true,
          type: "string",
          message: "请输入备注原因",
          trigger: "blur",
        };
      }
    },
    twoRules() {
      if (this.diseasesArr2.length) {
        return {
          required: true,
          message: "请选择二级病种",
          trigger: "change",
        };
      } else {
        return {
          required: false,
          message: "请选择二级病种",
          trigger: "change",
        };
      }
    },
    birthdays() {
      if (this.contactData.age) {
        var year = new Date().getFullYear() - this.contactData.age;
        return year + "-01" + "-01";
      }
    },
  },
  filters: {
    timeFormat(data) {
      return dayjs(data.created_at * 1000).format("YYYY-MM-DD");
    },
  },
  methods: {
    cityvalue(city) {
      this.params1.city_id = city.join(",");
      this.$refs.checkcity.changevalue(this.params1.city_id);
      // this.askData();
    },
    seeBIg(item) {
      this.src = item;
      this.imgModel = true;
    },
    repeatData(data) {
      this.repeatDatas = true;
      grapRepeatData({
        id: data.id,
      }).then((res) => {
        this.repeatDataList = res.list;
        this.repeatInfo = res.info;
      });
    },
    /* @函数功能: 初始化 */
    initial() {
      this.funaskData = clueusergrablist;
      this.funupdate = clueusercontact;
      this.paramsedit({ id: 0 });
      this.askData();
    },
    changeChartPages(e) {
      this.eChartPage = e;
      this.getChartList("infoData");
    },
    clearOne() {
      this.diseasesArr2 = [];
      this.contactData.twoDiseases = "";
    },
    getDatas: lodash.debounce(function(params) {
      if (this.optionscity.every((ee) => ee.label !== params)) {
        this.loadingcity = true;
        patientindexsearchcity({
          keywords: params,
        }).then((res) => {
          this.loadingcity = false;
          this.optionscity = Object.freeze(
            res.list.map((ee) => {
              return {
                value: ee.value + "," + params,
                label: ee.label,
              };
            })
          );
          // this.$refs.citySearch.isFocused = false;
        });
      }
    }, 700),
    remoteMethod(query) {
      if (query !== "") {
        this.getDatas(query);
      } else {
        this.optionscity = [];
      }
    },
    openInfo(data) {
      clueuserinfo({ id: data.id, type: 1 }).then((res) => {
        this.infoData = res;
        this.showInfoModal = true;
        if (res.info.dialog_mode == "E聊") {
          this.getChartList("infoData");
        }
      });
    },
    closeEl() {
      this.eChartPage = 1;
    },
    getChartList(obj) {
      this.logs(this.info);
      let params = {};
      switch (obj) {
        case "infoData":
          {
            params.clue_user_id = this.info.clue_user_id;
            params.page = this.eChartPage;
            params.pageSize = 10;
            params.channel_id = this.info.dialog_mode_id;
          }
          break;
        case "info":
          {
            params.clue_user_id = this.info.clue_user_id;
            params.page = this.eChartPage;
            params.pageSize = 10;
            params.channel_id = this.info.dialog_mode_id;
          }
          break;
      }
      EweCharts(params).then((res) => {
        this.eChartTotal = res.total;
        this.chartList = res.list;
      });
    },
    /* @函数功能: 请求数据 */
    askDatas(res) {
      this.list = Object.freeze(res.list);
      this.total = res.total;
    },
    changeOne(value) {
      if (value) {
        this.diseasesArr2 = this.diseasesArr1.filter(
          (ee) => ee.value == value
        )[0].children;
        this.contactData.twoDiseases = "";
        if (!this.diseasesArr2.length) {
          this.$nextTick(() => {
            this.$refs.formItem.validateField("twoDiseases");
          });
        }
      }
    },
    searchparams() {
      if (this.params.keyword !== "") {
        if (JSON.stringify(this.timedate) !== JSON.stringify(["", ""])) {
          let timer = [
            dayjs(this.timedate[0]).format("YYYY-MM-DD"),
            dayjs(this.timedate[1]).format("YYYY-MM-DD"),
          ];
          this.storage.set("clue-grap", timer);
          this.timedate = ["", ""];
          this.params.start_date = "";
          this.params.end_date = "";
        }
      } else {
        if (
          JSON.stringify(this.storage.get("clue-grap")) !==
          JSON.stringify(["", ""])
        ) {
          this.timedate = this.storage.get("clue-grap");
          this.params.start_date = this.timedate[0];
          this.params.end_date = this.timedate[1];
        }
      }
      this.params.page = 1;
      this.params.pageSize = 10;
      this.params.clue_status_id = "";
      this.params.channel_id = "";
      this.params.contact_id = "";
      this.params.unique_id = "";
    },
    paramsedit(row) {
      this.$refs.checkcity.changevalue("");
      clueuserinfo({ id: row.id, type: 1 }).then((res) => {
        this.logs(1111, res);
        if (row.id === 0) {
          this.departmentList = res.department;
          this.channelList = res.source_channel;
          this.postList = res.body_parts_list;
          this.clueList = res.clue_status;
          this.operationMember = res.operation_member;
          this.contact_member = res.contact_member;
          this.dialogList = res.dialog;
        } else {
          this.contact = res.contact;
          this.info = res.info;
          if (res.info.dialog_mode == "E聊") {
            this.getChartList("info");
          }
          this.contactData.userName = res.info.user_name;
          this.contactData.sex = res.info.gender;
          this.contactData.mobile = res.info.mobile;
          this.contactData.weChartNum = res.info.wechat_num;
          this.contactData.age = +res.info.age ? +res.info.age : null;
          this.contactData.birthday = res.info.birthday;
          this.preBirthday = res.info.age;
          if (res.default_city && JSON.stringify(res.default_city) !== "{}") {
            this.optionscity = [
              {
                value: res.default_city.city_id,
                label: res.default_city.city_name,
              },
            ];
            // this.contactData.city = res.default_city.city_id;
          }
          this.diseasesArr1 = res.diseases;
          this.patientStatusArr = res.patient_status;
          this.DatePicker = new Date(new Date().getTime() + 86400000);
          for (let item of this.clueList) {
            if (4 === +item.type) {
              this.contactData.clue_status_id = item.value;
            }
          }
          this.contactData.id = row.id;
        }
      });
    },
    askDatatime() {
      this.params.start_date = this.timedate[0];
      this.params.end_date = this.timedate[1];
      let timer = ["", ""];
      if (JSON.stringify(this.timedate) !== JSON.stringify(["", ""])) {
        timer = [
          dayjs(this.timedate[0]).format("YYYY-MM-DD"),
          dayjs(this.timedate[1]).format("YYYY-MM-DD"),
        ];
      }
      this.storage.set("clue-grap", timer);
      this.askDatachange();
    },
    blurday(num) {
      this.DatePicker = this.$blurday(num);
    },
    changeday(date) {
      this.contactData.day = this.$changeday(date);
    },
    changeclue(e) {
      for (let item of this.clueList) {
        if (e === item.value) {
          if (+item.value === 8) this.contactDatas = true;
          else this.contactDatas = false;
        }
      }
    },
    telrepeat(data) {
      let config = {
        id: this.contactData.id === undefined ? 0 : this.contactData.id,
        mobile: data,
      };
      patientindexsearchmobile(config).then((res) => {
        if (+res.result === 1) {
          this.$Message.error({
            duration: 2.5,
            content: "该手机号码已存在",
          });
        }
      });
    },
    WXrepeat(data) {
      let config = {
        id: this.contactData.id === undefined ? 0 : this.contactData.id,
        wechat_id: data,
      };

      patientindexsearchmobile(config).then((res) => {
        if (+res.result === 2) {
          this.$Message.error({
            duration: 2.5,
            content: "该微信号已存在",
          });
        }
      });
    },
    // 搜索手机号
    handlesearch(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.contactData.clue_status_id === "8") {
            let config = {
              id: this.contactData.id === undefined ? 0 : this.contactData.id,
              mobile: this.contactData.mobile,
              wechat_id: this.contactData.weChartNum,
            };
            patientindexsearchmobile(config).then((res) => {
              if (+res.result === 1) {
                this.$Modal.confirm({
                  title: "提示",
                  content: `<p>该手机号码已存在，是否继续录入?</p>`,
                  onOk: () => {
                    this.submitedit(name);
                  },
                  onCancel: () => {
                    this.remarksloading = false;
                  },
                });
              } else if (+res.result === 2) {
                this.$Modal.confirm({
                  title: "提示",
                  content: `<p>该微信号已存在，是否继续录入?</p>`,
                  onOk: () => {
                    this.submitedit(name);
                  },
                  onCancel: () => {
                    this.remarksloading = false;
                  },
                });
              } else if (+res.result === 3) {
                this.$Modal.confirm({
                  title: "提示",
                  content: `<p>该手机号/微信号已存在，是否继续录入?</p>`,
                  onOk: () => {
                    this.submitedit(name);
                  },
                  onCancel: () => {
                    this.remarksloading = false;
                  },
                });
              } else {
                this.submitedit(name);
              }
            });
          } else {
            this.submitedit(name);
          }
        }
      });
    },
    paramssubmit() {
      let config = {
        id: this.contactData.id,
        clue_status_id: this.contactData.clue_status_id,
        remark: this.contactData.remark,
        day: this.contactData.day,
        type: 1,
      };
      let config1 = {
        id: this.contactData.id,
        clue_status_id: this.contactData.clue_status_id,
        remark:
          this.contactData.clue_status_id === "8"
            ? ""
            : this.contactData.remark,
        day:
          this.contactData.clue_status_id === "8" &&
          (this.contactData.patientStatus === "2" ||
            this.contactData.patientStatus === "1")
            ? parseInt(new Date(this.DatePicker).getTime() / 1000)
            : "",
        type: 1,
        patient_status_id:
          this.contactData.clue_status_id === "8"
            ? this.contactData.patientStatus
            : "",
        user_name:
          this.contactData.clue_status_id === "8"
            ? this.contactData.userName
            : "",
        age:
          this.contactData.clue_status_id === "8" ? this.contactData.age : "",
        // birthday:
        //     this.contactData.clue_status_id === "8"
        //         ? this.contactData.age === this.preBirthday
        //             ? this.contactData.birthday
        //                 ? this.contactData.birthday
        //                 : this.birthdays
        //             : this.birthdays
        //         : "",
        birthday: this.contactData.clue_status_id === "8" ? this.birthdays : "",
        patient_diseases_id:
          this.contactData.clue_status_id === "8"
            ? this.contactData.oneDiseases
            : "",
        patient_diseases_child_id:
          this.contactData.clue_status_id === "8"
            ? this.contactData.twoDiseases
            : "",
        patient_remake:
          this.contactData.clue_status_id === "8"
            ? this.contactData.remark
            : "",
        city_id:
          this.contactData.clue_status_id === "8"
            ? this.contactData.city_id
            : "",
        appointment_day:
          this.contactData.clue_status_id === "8" &&
          this.contactData.patientStatus === "1"
            ? parseInt(new Date(this.DatePicker1).getTime() / 1000)
            : "",
        gender:
          this.contactData.clue_status_id === "8" ? this.contactData.sex : "",
        // city_name: this.contactData.city
        //     ? this.optionscity.filter(
        //         (ee) => ee.value === this.contactData.city
        //     )[0].label
        //     : "",

        wechat_num:
          this.contactData.clue_status_id === "8"
            ? this.contactData.weChartNum
            : "",
        mobile:
          this.contactData.clue_status_id === "8"
            ? this.contactData.mobile
            : "",
        body_parts_id:
          this.contactData.clue_status_id === "8"
            ? this.contactData.bodyPart.join(",")
            : "",
      };
      return this.edits ? config : config1;
    },
    paramscancel() {
      this.contactData = {
        id: undefined,
        clue_status_id: "8",
        remark: "",
        day: 1,
        day1: 1,
        bodyPart: [],
        type: 1,
        userName: "",
        mobile: "",
        wechat_num: "",
        age: 0,
        birthday: "",
        sex: "",
        city_id: "",
        oneDiseases: "",
        twoDiseases: "",
        patientStatus: "2",
      };
      this.contactDatas = true;
      this.diseasesArr2 = [];
      this.diseasesArr1 = [];
    },
    blurday(num) {
      this.DatePicker = this.$blurday(num);
    },
    changeday(date) {
      this.contactData.day = this.$changeday(date);
    },
    blurday1(num) {
      this.DatePicker1 = this.$blurday(num);
    },
    changeday1(date) {
      this.contactData.day1 = this.$changeday(date);
    },
    checkbox3(e) {
      this.timedate = ["", ""];
      this.params.page = 1;
      this.params.have_repeat = e.length;
      this.params.start_date = "";
      this.params.end_date = "";
      this.askData();
    },
    checkbox4(e) {
      this.timedate = ["", ""];
      this.params.page = 1;
      this.params.contact_way = e.length;
      this.params.start_date = "";
      this.params.end_date = "";
      this.askData();
    },
  },
};
</script>
<style scoped>
.person {
  color: #999;
}

.repeatColor {
  color: red;
}
</style>
